<!DOCTYPE html>
<html lang="en">
<!--
      Copyright (c) 2011 Felix Niklas
      This script is freely distributable under the terms of the MIT license.
-->
<head>
  <meta charset="utf-8" />
  <title>Paperfold CSS</title>
  <link href="css/style.css" rel="stylesheet" />
  <link href="css/buddycloud.css" rel="stylesheet" />
  <link href="css/paperfold.css" rel="stylesheet" />
  <script type="text/javascript" src="js/modernizr.custom.71147.js"></script>
  <script type="text/javascript" src="js/prefixfree.min.js"></script>
</head>
<body>
  <div id="controls">
    <h1>To do List</h1>
    <button id="go" class="highlighted">Open</button>
  </div>
    
  <div class="playground">
    <div class="box buddycloud">
      <h1>Teddy & Candy</h1>
      <div class="stream">
        <article class="topic">
          <section class="opener">
            <div class="avatar user3"></div>
            <div class="postmeta">
              <span class="time">1 days</span>
            </div>
            <span class="name">Candy</span><span class="location">from Olympic Garden</span>
            <p>GOD! Why did I marry such an ugly man?</p>
          </section>
          <div class="hidden">
            <section class="comment">
              <div class="avatar user1"></div>
              <div class="postmeta">
                <span class="time">45 Mins</span>
              </div>
              <span class="name">Teddy</span><span class="location">from Sofa</span>
              <p>Who knows? Maybe I am ugly.</p>
            </section>
            <section class="comment">
              <div class="avatar user3"></div>
              <div class="postmeta">
                <span class="time">40 Mins</span>
              </div>
              <span class="name">Candy</span><span class="location">from Home</span>
              <p>Okay, I wanna a divorce, loser! Get out of my life!</p>
            </section>
            <section class="comment">
              <div class="avatar user1"></div>
              <div class="postmeta">
                <span class="time">35 Mins</span>
              </div>
              <span class="name">Teddy</span><span class="location">from SH</span>
              <p>Hmmm... PLEASE! DON'T LEAVE ME ALONE!</p>
            </section>
            <section class="comment">
              <div class="avatar user3"></div>
              <div class="postmeta">
                <span class="time">30 Mins</span>
              </div>
              <span class="name">Candy</span><span class="location">from Mola-Mola</span>
              <p>No. I have decided, please give me the freedom.</p>
            </section>
            <section class="comment">
              <div class="avatar user1"></div>
              <div class="postmeta">
                <span class="time">25 Mins</span>
              </div>
              <span class="name">Teddy</span><span class="location">from NY</span>
              <p>LOL... Fine, okay, very well, alright then, heng!</p>
            </section>
          </div><!-- /hidden -->
          <section class="seeMore">
            <span>See <span>5</span> More Posts</span>
          </section>
          <section class="comment">
            <div class="avatar user3"></div>
            <div class="postmeta">
              <span class="time">20 Mins</span>
            </div>
            <span class="name">Candy</span><span class="location">from Ho Chi Minh City</span>
            <p>??? WHAT!! You bitch!</p>
          </section>
          <section class="comment">
            <div class="avatar user1"></div>
            <div class="postmeta">
              <span class="time">15 Mins</span>
            </div>
            <span class="name">Teddy</span><span class="location">from HK</span>
            <p>I'm going to tell you if you say it again, I will ever never ....whatever, lots things.</p>
          </section>
          <section class="answer">
            <div class="avatar user1"></div>
            <textarea placeholder="post a comment..."></textarea>
            <div class="controls">
              <div class="button small prominent">Post</div>
            </div>
          </section>
        </article>
        <article class="topic">
          <section class="opener">
            <div class="avatar user3"></div>
            <div class="postmeta">
              <span class="time" title="5:06pm 06.06.2011">10 Mins</span>
            </div>
            <span class="name">Candy</span><span class="location">from Home</span>
            <p>Candy's advice:</p>
              <p>1. Be nice to your husband or boyfriend.</p>
              <p>2. Be nice to your husband or boyfriend.</p>
              <p>3. Be nice to your husband or boyfriend.</p>
              
          </section>
          <section class="answer">
            <div class="avatar user3"></div>
            <textarea placeholder="post a comment..."></textarea>
            <div class="controls">
              <div class="button small prominent">Post</div>
            </div>
          </section>
        </article>

         <article class="topic">
             <section class="opener">
                 
             </section>
         </article>
        
      </div>
    </div>
  </div>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/html5slider.js"></script>
<script type="text/javascript" src="js/paperfold.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
</body>
</html>